<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title>下拉菜单</title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        body
        {
            margin: 0;
        }
        nav
        {
            width: 100%;
            height: 60px;
            border-bottom: 1px solid gray;
        }
        .box
        {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 1200px;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            color: black;
            cursor: pointer;
        }
        .box li
        {
            cursor: pointer;
        }
        .box li:hover
        {
            color: #D4491D;
        }
        .into
        {
            width: 300px;
            height: 200px;
            position: absolute;
            /* background-color: salmon; */
            border: 1px solid lightgray;
            box-shadow: 0 0 3px lightgray;
            background-color: white;
            margin-left: -130px;
            margin-top: -10px;
            z-index: 2;
            display: none;        
        }
        .into ul 
        {
            margin-left: 35px; 
            padding: 0;  
            list-style: none; 
            float: left;
        }
        .into ul li
        {
            height: 45px;
            color: black;
            /* 不换行 */
            white-space: nowrap;
            /* 省略号代替多余的文字 */
            text-overflow: ellipsis;
            /* 溢出部分：隐藏 */
            overflow: hidden;
        }
        .more
        {
            width: 100px;
            height: 200px;
            margin: 0;
            padding: 0;
            list-style: none;
            color: black;
            border: 1px solid lightgray;
            box-shadow: 0 0 3px lightgray;
            position: absolute;
            margin-left: -30px;
            background-color: white;
            margin-top: -15px;
            z-index: 2;
             /* display: none;  */
        }
        .more li
        {
            height: 50px;
            margin-left: 30px;
            margin-top: -10px;
        }
        .more li:hover
        {
            color: #D4491D;
        }
        .icon
        {
            background-image: url(header_3091d80.png);
        }
        .icon-1
        {
            width: 15px;
            height: 15px;
            background-position: -110px 0;
            position: relative;
            top: -30px;
            left: -125px;
            display: inline-block;
            z-index: 2;
        }
        .icon-2
        {
            width: 15px;
            height: 15px;
            background-position: -110px 0;
            position: relative;
            top: -30px;
            left: -95px;
            display: inline-block;
            z-index: 2;
        }
        .icon-4
        {
            width: 15px;
            height: 15px;
            background-position: -110px 0;
            top: -9px;
            left: 35px;
            position: relative;
            display: block;
        }
        .icon-3
        {
            width: 10px;
            height: 5px;
            background-position: -60px 0;
            position: relative;
            top: -30px; 
            left: 40px; 
            display: block;
        }
         .favorite .icon-3
         {
            transition: all 0.5s linear;
            /* 围绕中点旋转 */
            transform-origin:  center center;
         }
            
        .favorite:hover .icon-3
        {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <nav>
        <ul class="box">
            <li>首页</li>
            <li class="button">剧集
              <section class="into">
                <span class="icon icon-1"></span>
                <ul>
                    <li>楚乔传 TV版</li>
                    <li>镇魂街 第一季</li>
                    <li>醉玲珑</li>
                    <li>终极三国2017</li>
                </ul>
                <ul>
                    <li>春风十里不...</li>
                    <li>我的前半生</li>
                    <li>微微一笑很...</li>
                    <li>龙珠传奇</li>
                </ul> 
              </section> 
            </li>
            <li class="button">电影
               <section class="into">
                <span class="icon icon-2"></span>
                <ul>
                    <li>速度与激情8</li>
                    <li>战狼</li>
                    <li>逆时营救</li>
                    <li>我的外星女友</li>
                </ul>
                <ul>
                    <li>人间大炮</li>
                    <li>杀破狼2</li>
                    <li>记忆大师</li>
                    <li>有部电影</li>
                </ul>
              </section>  
            </li>
            <li class="button">综艺
               <section class="into">
                <span class="icon icon-1"></span>
                <ul>
                    <li>极限挑战 第...</li>
                    <li>脑洞大开 第...</li>
                    <li>暴走漫画一...</li>
                    <li>开心俱乐部...</li>
                </ul>
                <ul>
                    <li>挑战者联盟...</li>
                    <li>火星情报局</li>
                    <li>日日煮2017</li>
                    <li>举杯呵呵喝</li>
                </ul>
              </section>  
            </li>
            <li>音乐</li>
            <li class="button">少儿
               <section class="into">
                <span class="icon icon-1"></span>
                <ul>
                    <li>宝狄与好友...</li>
                    <li>纳米核心 第...</li>
                    <li>我的汤姆猫</li>
                    <li>小玲玩具</li>
                </ul>
                <ul>
                    <li>小猪佩奇</li>
                    <li>汪汪队立大...</li>
                    <li>会说话的家族</li>
                    <li>棉花糖和云...</li>
                </ul>
              </section> 
            </li>
            <li>来疯</li>
            <li>直播</li>
            <li>公益</li>
            <li class="button favorite">更多<span class="icon icon-3"></span>
                <ul class="into more">
                    <span class="icon icon-4"></span>
                    <li>VR</li>
                    <li>生活</li>
                    <li>原创</li>
                    <li>排行</li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>
<script>
  window.onload = function()
  {
    var buttons = document.querySelectorAll('.button');
    var boxs = document.querySelectorAll('.into');
    var index = 0
    for(var i = 0; i < buttons.length; i++)
    {
        buttons[i].index = i;
        buttons[i].onmouseover = function()
        {
            boxs[this.index].style.display = 'block';
        }
        buttons[i].onmouseout = function()
        {
            boxs[this.index].style.display = 'none';
        }
    }

  }
    
</script>